<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性）
		 1.控制字体：font family,font-size,font-weight
		 2.控制文本布局：text-aglin,line-height,letter-spacing,word-spacing
		 3.文本修饰效果：text-decoration,text-shadow
		 4.处理文本效果：white-space
		 -->
		 <style>
			 /* css3语法：选择器{
				        属性：属性值；
						属性：属性值；
					    ...
			            }
						叫法：一个样式
			  */
			 bob y div#d1{
				 color: #55ffff;
				 /* 知识点1：文本格式化属性控制字体 */
				 font-family: 华文彩云,sans-serif;
				 /* 设置多个字体：浏览器会按照顺序寻找可用字体
				  用户体验，用户系统有什么字体，优先指定字体
				  通常与通配选择器使用  *{}
				  */
				 /* 知识点2：文本格式化属性控制字体
				  font-size:字体大小属性，与单位共存;
				  单位 px像素  使用特点：绝对值、PC端
				  em 相对单位：理解：倍数
				            使用特点：相对与父元素按照倍数方式、移动端
			    */
			   /* 知识点3：文本格式化属性控制字体
				font-weight: 字体粗细属性，不存在单位
				             属性值：数值【100 200 300 ...900】
							 常用数值：400
							 单词【400==normal/bold】
				使用方法：通配选择器搭配使用：指定全局字体正常字体粗细
				 */
				  font-weight: 100;
				  font-size: 1em;
				  /* 补充：1、英文大写；2、首字母大写；3、段落开始间距200px */
			 }
			 div#d1{
				 /**通过加权方式,锁定元素 权值:101**/
				 color:#ffaaff;
				 /* 知识点4:文本格式化属性控制文本格式
				  text-align：文本对齐属性
				   left|right|center|justify：两端对齐
				  */
				text-align: justify;
				/* 知识点5：文本是格式化属性控制文本格式
				 行高属性line-hegiht：文本垂直效果
				 使用方式：1.高度属性
				          2.在高度属性上加行高属性：属性值一致
			    */
			   border:1px soild red;
			   height:100px;
			   line-height: 100px;
			   /* 补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离 */
			   /* 知识点6:letter-spacing: 设置字符之间间隙;
				  知识点7:word-spacing: 设置单词之间间隙;
				  */
				 letter-spacing: 10px;
				 word-spacing: 10px;
			 }
			 #d1{
				 color:#e4393c;
			 }
			 
			 a.c1{
				 /* 权值：11 */
				 /* 知识点8;text-decoration 修饰超链接样式
				    使用方法：与通配符一起使用，设置全局页面超链接样式 
				    属性值：none|underline|line-througt
					*/
				text-decoration: line ;
				/* 知识点9：text-shadow 
				属性值：X轴 Y轴 blur模糊距离 color: ;
				*/
			   text: shadow 5px 5px 5px #ff0;
			 }
			 p{
				 border: 1px solid red;
				 /**知识点10:文本换行效果
				 white-spaceL:文本换行效果
				 属性值:
				 nowrap不换行,只显示一行，超出部分隐藏
				 |pre保存空格和回车|normal默认 空格合并，换行**/
				 white-space: pre;
				 overflow: hidden;
				 }
			 
		 </style>
	</head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tab】
		     id选择器，通过加权找到div，添加颜色
		 -->
		 <div id="d1">Lorem</p>
		 <hr>
		 <h4>文本效果</h4>
		 <!-- 文本修饰相关属性
		  知识点7：text-decoration属性：设置超链接效果-->
		 <a class="c1 c2" href="http://www.tsgzy.zdu.cn">实现跳转【方式：6种】</a>
		 <div style="height:800px;"></div>
		 <marquee>
			 <h4>处理文本效果</h4>
		 </marquee>
		 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ipsa ipsam unde aspernatur accusantium beatae, assumenda quo deleniti, voluptatum reiciendis ea nisi! Voluptas, omnis explicabo delectus aliquam distinctio expedita. Nostrum!</p>
	</body> 
</html>